<template>
  <div style="padding:10px">
     <main-layout>
      <div>
        <div class="back-view">
          <div class="title vxe-icon-feedback" >订单详情
          </div>
          <div class="back" @click="onClose">
            <vxe-button  size="small" content="返回" icon="vxe-icon-undo"></vxe-button>
          </div>
        </div>
        <div style="width:80%;padding:20px 0;">
          <el-steps :active="formdata.status||1">
              <el-step title="买家创建订单" :description="formdata.createTime"></el-step>
              <el-step title="买家付款" :description="formdata.paymentTime||'--'"></el-step>
              <el-step title="卖家发货" :description="formdata.deliveryTime||'--'"></el-step>
              <el-step title="买家确认收货" :description="formdata.confirmReceiveTime||'--'"></el-step>
              <el-step title="交易完成" :description="formdata.autoConfirmDay||'--'"></el-step>
            </el-steps>
            <div style="font-size: 16px;color: #333;padding-top: 20px;">当前订单状态：<span style="font-size: 17px;color: #04AE70;">{{ formdata.statusMeaning||'--' }}</span></div>
        </div>
        <el-form ref="ruleFormRef" :model="formdata">
                <div class="max-title" >订单记录</div>
                <el-form-item label="订单号:" style="margin-bottom:0;">
                  {{formdata.orderSn}}
                </el-form-item>
                <el-form-item label="下单时间:" style="margin-bottom:0;">
                  {{formdata.createTime }}
                </el-form-item>
                <el-form-item label="付款时间:" style="margin-bottom:0;">
                  {{formdata.paymentTime||'--'}}
                </el-form-item>
                <el-form-item label="发货时间:" style="margin-bottom:0;">
                  {{formdata.deliveryTime||'--'}}
                </el-form-item>
                <el-form-item label="收货时间:" style="margin-bottom:0;">
                  {{formdata.confirmReceiveTime||'--'}}
                </el-form-item>
                <el-form-item label="订单完成/关闭时间:" style="margin-bottom:0;">
                  {{formdata.autoConfirmDay||'--'}}
                </el-form-item>
                <el-form-item label="创建人:" style="margin-bottom:0;">
                  {{formdata.createName||'--'}}
                </el-form-item>
                <div class="max-title" >收货信息</div>
                <el-form-item label="收货人:" style="margin-bottom:0;">
                  {{formdata.receiverName||'--'}}
                </el-form-item>
                <el-form-item label="手机号码:" style="margin-bottom:0;">
                  {{formdata.receiverPhone||'--'}}
                </el-form-item>
                <el-form-item label="收货地址:" style="margin-bottom:0;">
                  {{formdata.receiverProvince+'/'+formdata.receiverCity+'/'+formdata.receiverRegion+'/'+formdata.receiverDetailAddress||'--'}}
                </el-form-item>
                <el-form-item label="备注信息:" style="margin-bottom:0;">
                  {{formdata.note||'--'}}
                </el-form-item>
                <div class="max-title" >采购详情</div>
                <el-form-item> 
                <vxe-table
                  border
                  style="width:60vw;margin-top:10px"
                  :row-config="{keyField: 'value', isHover: true}"
                  :column-config="{resizable: true}"
                  :scroll-y="{enabled: true}"
                  :min-height="80"
                  size="small"  
                  :data="formdata.omsOrderItemVoList||[]">
                  <vxe-column type="seq" width="60" title="序号"></vxe-column>
                  <vxe-column field="label" title="商品图片" width="80">
                    <template #default="{row}">
                          <template v-if="row.pmsSpuImagesVoList && row.pmsSpuImagesVoList.length>0">
                            <imageView style="width:60px;height:60px" :list="row.pmsSpuImagesVoList.map((item)=>item.url)"  :url="row.pmsSpuImagesVoList[0].url" />
                          </template>
                    </template>
                  </vxe-column>
                  <vxe-column field="spuName" title="商品名称" :show-overflow="true" width="180"></vxe-column>
                  <vxe-column field="skuName" title="规格" :show-overflow="true"></vxe-column>
                  <vxe-column field="salesAmount.standardString" title="单价(元)"></vxe-column> 
                  <vxe-column field="buyQuantity" title="数量" align="center"></vxe-column>
                  <vxe-column field="subtotalCouponAmount.standardString" title="优惠(元)"></vxe-column>
                  <vxe-column field="subtotalExecAmount.standardString" title="小计(元)" width="180">
                    <template #default="{row}">
                     {{ (row.subtotalExecAmount.amount+row.subtotalYunfeiAmount.amount).toFixed(2) }}
                     <div v-if="row.subtotalYunfeiAmount.amount">(含运费 {{ row.subtotalYunfeiAmount.standardString }}元)</div>
                    </template>  
                  </vxe-column>
                  <vxe-column field="label" title="物流信息">
                  </vxe-column>
                </vxe-table> 
              </el-form-item>
              <el-form-item label="商品总价:" style="margin-bottom:0;">
                  {{formdata.totalAmount?.standardString||'--'}} 元
                </el-form-item>
                <el-form-item label="运费:" style="margin-bottom:0;">
                  {{formdata.totalYunfeiAmount?.standardString||'--'}}元
                </el-form-item>
                <el-form-item label="共优惠:" style="margin-bottom:0;">
                  {{formdata.totalCouponAmount?.standardString||'0'}}元
                </el-form-item>
                <el-form-item label="待付款合计:" style="margin-bottom:0;">
                  {{formdata.totalPayAmount?.standardString||'--'}}元
                </el-form-item>
                <!-- <el-form-item v-if="formdata.status==1" style="padding-top:20px;">
                  <vxe-button  @click="btnClose(formdata)"  status="danger" icon="vxe-icon-close" content="关闭交易"></vxe-button>
                  <vxe-button status="primary" icon="vxe-icon-send">付款</vxe-button>
                </el-form-item> -->
      </el-form>
        </div>
    </main-layout>
</div> 
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import {getOrderInfo,closeOrder} from '@/api/order'
import mainLayout from '@/components/custom/mainLayout.vue'
import imageView from '@/components/custom/image.vue'
import { VXETable } from 'vxe-table'
import { useRouter } from 'vue-router'
const router = useRouter()
const ruleFormRef = ref(null)
const formdata = ref({})

onMounted(async () => {
  getOrder()
})

const getOrder =async()=>{
  let res = await getOrderInfo({orderId:router.currentRoute.value.query.orderId})
  if(res.success){
    formdata.value = res.data
  }
}
const btnClose = async(row) => {
  const type = await VXETable.modal.confirm('您确定要关闭该订单吗？')
 if(type=='confirm'){
   let res= await closeOrder([row.orderId])
   if(res.success){
    VXETable.modal.message({ content: '关闭成功' })
    getOrder()
   }else{
    VXETable.modal.message({ content: res.message })
   }
 }}

const onClose = ()=>{
  router.go(-1)
}



</script>
<style lang="scss" scoped>
.show-box{
    width:400px;
    background-color: #f5f5f5;
    margin: 10px 0;
    border-radius: 2px;
    padding: 10px 0;
}
.back-view{
    display: flex;
    justify-content: space-between;
    padding: 0 10px 15px 0;
    align-items: center;
    border-bottom:1px solid #ddd;
    margin-bottom:20px;
    .title{
      font-size:15px;
      font-weight: bold;
      color:#565656;
      position: relative;  


      text-indent:6px;
    }
    .title::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
  .back{
    font-size:15px;
    color:#888;
    cursor: pointer;
  }
}
.max-title{
    display: flex;
    justify-content: space-between;
    padding: 10px 0 10px 0;
    align-items: center;
    position: relative;
    font-size: 15px;
    text-indent: 10px;
    font-weight: bold;
    color: #565656;
    margin-top:10px;
    &::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
}
</style>
